<template>
  <el-dialog v-bind="attrs"
             v-on="$listeners">
    <template v-slot:title>
      <slot name="header">
        <div class="z-dialog__header-title">
          <slot name="title">
            {{title}}
          </slot>
        </div>
        <ZIcon icon="el-icon-close cursor-pointer"
               @click.native="close"
               v-if="showClose" />

      </slot>
    </template>
    <main class="z-dialog__content flex flex-col relative"
          :style="{
      padding: padding ? '16px' : 0,
      minHeight:`${minHeight}px`,
      height:height ? `${height}px`: 'auto',
      overflowX:'hidden'
    }">
      <slot></slot>
    </main>
    <footer class="z-dialog__footer flex"
            v-if="footer">
      <slot name="footer">
        <ZButton :name="$t('cancle')"
                 size="mini"
                 @click="cancle" />
        <ZButton :name="$t('Save')"
                 throttle
                 type="primary"
                 size="mini"
                 @click="save" />
      </slot>
    </footer>
  </el-dialog>
</template>

<script>
import ZButton from '@/components/storybook/z-button'
import ZIcon from '@/components/storybook/z-icon'
export default {
  name: 'ZDialog',
  components: {
    ZButton,
    ZIcon
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    title: String,
    showClose: {
      type: Boolean,
      default: true
    },
    minHeight: {
      type: Number,
      default: 300
    },
    height: Number,
    footer: {
      type: Boolean,
      default: true
    },
    padding: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {

    }
  },
  computed: {
    currentValue: {
      get () {
        return !!this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    attrs () {
      const { customClass, ...rest } = this.$attrs || {}
      return {
        appendToBody: true,
        ...rest,
        showClose: false,
        customClass: `z-dialog ${customClass}`,
        visible: this.currentValue
      }
    }
  },
  methods: {
    cancle (event) {
      this.currentValue = false
      this.$emit('cancle', event)
    },
    save (event, done) {
      const callback = () => {
        done && done()
        this.currentValue = false
      }
      this.$emit('save', event, callback)
    },
    close (event) {
      this.currentValue = false
      this.$emit('close', event)
    }
  }

}
</script>
<style  lang="scss">
.z-dialog {
  .el-dialog__header {
    padding: 0 16px;
    height: 48px;
    box-shadow: inset 0px -1px 0px 0px #f0f0f0;
    display: flex;
    align-items: center;
    color: #404040;
    .el-icon-close {
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }
  }
  .el-dialog__body {
    padding: 0;
    position: relative;
  }
  .z-dialog__header-title {
    flex: 1;
    font-weight: 600;
  }
  &__footer {
    padding: 16px;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>
